<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .yulan{
            width: 100px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="showInfo">
    <a href="/login.html">去登录</a>
    <form action="/register" method="get" class="zhuce">
        账号<input type="text" name="user" class="user"><br>
        密码<input type="text"  name="pwd" class="pwd"><br>
        用户名<input type="text"  name="name" class="name"><br>
        头像<input type="file"  name="imgSrc" class="imgFileUp"><br>
        <div class="yulan"></div>
    <!--    <img src="" alt="">-->
     <button type="button" class="register"> 注册</button>
    </form>

</div>
<script src="../../Jquery/jquery-1.11.3.js">
</script>
<script>
    //注册步骤。
    //1、获取上传的头像，预览
    //1.1获取选中的文件名。文本选的change函数;节点的files，不能用jq对象
    $('.zhuce').css({
        display:'block'
    })
    $('.imgFileUp').change(function () {
                     console.log(this)
        //获取files结果是一个列，选中第一个
                    let inputFileName=this.files[0]
                    console.log(inputFileName)
            //用FileReader对象的readAsDataURL()函数得到上传文件的数据流（不是路径，是将文件转换成base64编码的二进制数据流，）。
                let reader=new FileReaderFileReader()
        reader.readAsDataURL(inputFileName)
        //以上函数加载完毕后会得到结果
        reader.onload=function () {

            let src=this.result
            //1.2创建预览img节点。
            //1.3将1.1获取的文件名赋到节点src
            //1.4把节点添加到表单中。
            $('.yulan').append(`<img src=${src}>`).children().css({
                width:'100%'
            })

        }
    })
//2提交注册信息。
    $('.register').click(function () {
        //2.1获取注册信息。
        let user=$('.user').val()
        let pwd=$('.pwd').val()
        let name=$('.name').val()
        //这里传的是名字，后台处理存储时存编码
        let imgSrc=$('.imgFileUp')[0].files[0]
        let data= new FormData()

    data.append('user',user)
    data.append('pwd',pwd)
    data.append('name',name)
    data.append('imgSrc',imgSrc)
        console.log(data)
        $.ajax({
            method:'post',
            url:'/register',
            data,
            //添加数据类型false时添加正确的类型
            contentType:false,
            processData:false,//防止让键值相等？

            success(data){
                console.log(data)
                //渲染注册成功的返回信息
                if (data.code===200){
                    $('.zhuce').css({
                        display:'none'
                    })
                    $('.showInfo').append(`
                        <h4>注册成功</h4>
                        <p>账号 :${data.data.u_user}</p>
                        <p>密码 :${data.data.u_pwd}</p>
                        <p>用户名 :${data.data.u_name}</p>
                        <img src='${data.data.u_imgSrc}' alt="" class="yulan">
                             `)
                }


            }
        })
    })

</script>
</body>
</html>